<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <canvas id="c" width="400" height="300"></canvas>

    <script id="vertex-shader" type="x-shader/x-vertex">
      attribute vec2 a_position;
      attribute vec2 a_textCoord;
      uniform vec2 u_resolution;


      varying vec2 v_textCoord;

      void main(){
        vec2 position = (a_position / u_resolution * 2.0) - 1.0;

        gl_Position = vec4(position,0,1);
        v_textCoord = a_textCoord;
      }
    </script>

    <script id="fragment-shader" type="x-shader/x-fragment">
      precision mediump float;
      uniform sampler2D u_image;

      varying vec2 v_textCoord;

      void main(){
        gl_FragColor = texture2D(u_image, v_textCoord);
      }
    </script>

    <script>
      window.onload = function () {
        var image = new Image()
        image.src = ' /3D/leaves.jpg' // MUST BE SAME DOMAIN!!!
        image.onload = function () {
          render(image)
        }
      }

      function render(image) {
        const gl = document.querySelector('#c').getContext('webgl')
        if (!gl) return
        //
        const vertexSource = document.querySelector('#vertex-shader').text
        const fragmentSource = document.querySelector('#fragment-shader').text

        function createShader(gl, type, source) {
          const shader = gl.createShader(type)
          gl.shaderSource(shader, source)
          //
          gl.compileShader(shader)

          if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            console.log(
              `create shader had error: \n${gl.getShaderInfoLog(shader)}`
            )
            gl.deleteShader(shader)

            return null
          }

          return shader
        }
        const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource)
        const fragmentShader = createShader(
          gl,
          gl.FRAGMENT_SHADER,
          fragmentSource
        )

        function createProgram(gl, vertexShader, framgentShader) {
          const program = gl.createProgram()
          gl.attachShader(program, vertexShader)
          gl.attachShader(program, framgentShader)

          gl.linkProgram(program)

          if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
            console.log(
              `create program had error: \n${gl.getProgramInfoLog(program)}`
            )
            return null
          }

          return program
        }
        const shaderProgram = createProgram(gl, vertexShader, fragmentShader)

        {
          gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)
          gl.clearColor(0, 0, 0, 0)
          gl.clear(gl.COLOR_BUFFER_BIT)
        }

        gl.useProgram(shaderProgram)

        {
          const textCoordAttributeLocation = gl.getAttribLocation(
            shaderProgram,
            'a_textCoord'
          )
          const textCoordBuffer = gl.createBuffer()
          gl.bindBuffer(gl.ARRAY_BUFFER, textCoordBuffer)
          gl.bufferData(
            gl.ARRAY_BUFFER,
            new Float32Array([
              0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0,
            ]),
            gl.STATIC_DRAW
          )
          //

          const texture = gl.createTexture()
          gl.bindTexture(gl.TEXTURE_2D, texture)

          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)

          gl.texImage2D(
            gl.TEXTURE_2D,
            0,
            gl.RGBA,
            gl.RGBA,
            gl.UNSIGNED_BYTE,
            image
          )

          // Turn on the texcoord attribute
          gl.enableVertexAttribArray(textCoordAttributeLocation)
          gl.vertexAttribPointer(
            textCoordAttributeLocation,
            2,
            gl.FLOAT,
            false,
            0,
            0
          )
        }
        // resolutions
        {
          const resolutionUniformLocation = gl.getUniformLocation(
            shaderProgram,
            'u_resolutions'
          )

          gl.uniform2f(
            resolutionUniformLocation,
            gl.canvas.width,
            gl.canvas.height
          )
        }
        //  position
        {
          const positionBuffer = gl.createBuffer()
          gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
          gl.bufferData(
            gl.ARRAY_BUFFER,
            new Float32Array([0, 0, 400, 0, 0, 300, 0, 300, 400, 300, 400, 0]),
            gl.STATIC_DRAW
          )

          const positionAttributeLocation = gl.getAttribLocation(
            shaderProgram,
            'a_position'
          )

          gl.enableVertexAttribArray(positionAttributeLocation)
          gl.vertexAttribPointer(
            positionAttributeLocation,
            2,
            gl.FLOAT,
            false,
            0,
            0
          )
        }

        // Draw the rectangle.
        var primitiveType = gl.TRIANGLES
        var offset = 0
        var count = 6
        gl.drawArrays(primitiveType, offset, count)
      }
    </script>
  </body>
</html>
